<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/product.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/damai.js"></script>
</head>
<body>
<div id="app">
	<damai>
		<div class="container productList">
	

		<category></category>
		
		<div class="span18 last">
			
			<form id="productForm" action="image/蔬菜 - Powered By Mango Team.htm" method="get">
				<input type="hidden" id="brandId" name="brandId" value=""/>
				<input type="hidden" id="promotionId" name="promotionId" value=""/>
				<input type="hidden" id="orderType" name="orderType" value=""/>
				<input type="hidden" id="pageNumber" name="pageNumber" value="1"/>
				<input type="hidden" id="pageSize" name="pageSize" value="20"/>
					
				<div id="result" class="result table clearfix">
						<ul>
						
							<li v-for="p in products">
										<a :href="'detail.html?pid='+p.pid">
											<img :src="p.image" width="170" height="170"  style="display: inline-block;"/>

											<span style='color:green'>
												{{p.pname}}
											</span>
											 
											<span class="price">
												商城价： ￥{{p.shopPrice}}/份
											</span>
											 
										</a>
							</li>

						</ul>
				</div>
	
		<div class="pagination">
		  第{{pageObj.current}}/{{pageObj.pages}}
				<template v-for="i in pageObj.pages">
					<span v-if="i==pageObj.current" class="currentPaage" @click="pageObj.current=i;query()">{{i}}</span>
					<a v-else href="#" @click.prevent="pageObj.current=i;query()">{{i}}</a>
				</template>
				<a class="nextPage" href="#" @click.prevent="pageObj.current+=pageObj.current<pageObj.pages?1:0;query()">&nbsp;</a>
				<a class="lastPage" href="#" @click.prevent="pageObj.current=pageObj.pages;query()"> </a>
				
		</div>
				</form>
			</div>
		</div>
	</damai>
</div>
<script>
	var v=new Vue({
		el:"#app",
		data:{
			products:[],
			pageObj:{size:16,current:1,pages:0}
		},
		created() {
			this.query();
		},
		methods:{
			query(){
				//根据小类查询 serach:?csid=xxx  or  ?cid=xxx
				let pageWhere =`&size=${this.pageObj.size}&page=${this.pageObj.current}`;
				if(location.search.indexOf("csid")>0){
					//小类查询
					axios.get("product/queryByCsid"+location.search+pageWhere).then(res=>{
						this.pageObj=res.data;
						this.products=this.pageObj.records;
					})
				}else if(location.search.indexOf("cid")>0){
					//小类查询
					axios.get("product/queryByCid"+location.search+pageWhere).then(res=>{
						this.pageObj=res.data;
						this.products=this.pageObj.records;
					})
				}
			}

		}
	})
</script>
</body></html>